import { Column, Group } from '@/components/pro-panel/index.typing';
import { useStageStore } from '@/store/stage';

const useGroup = () => {
  const stageStore = useStageStore();
  const group: Group = {
    title: '比例',
    key: 'scale',
    collapsed: false,
    columns: [
      {
        label: '等比例缩放',
        prop: 'isScale',
        type: 'switch',
        className: 'labelPositionLeft',
      },
      {
        label: 'x轴',
        prop: 'scale.0',
        type: 'input-number',
        visible: !stageStore.layerData.data.isScale,
        formProps: {
          controlsPosition: 'right',
          min: 80,
          max: 1000,
          unit: '%',
          valueOnClear: 100,
        },
      },
      {
        label: 'Y轴',
        prop: 'scale.1',
        type: 'input-number',
        visible: !stageStore.layerData.data.isScale,
        formProps: {
          controlsPosition: 'right',
          min: 80,
          max: 1000,
          unit: '%',
          valueOnClear: 100,
        },
      },
      {
        label: 'Z轴',
        prop: 'scale.2',
        type: 'input-number',
        visible: !stageStore.layerData.data.isScale,
        formProps: {
          controlsPosition: 'right',
          min: 80,
          max: 1000,
          unit: '%',
          valueOnClear: 100,
        },
      },
      {
        label: '三轴',
        prop: 'scaleAll',
        type: 'input-number',
        visible: stageStore.layerData.data.isScale,
        formProps: {
          controlsPosition: 'right',
          min: 80,
          max: 1000,
          unit: '%',
          valueOnClear: 100,
        },
      },
    ].filter((el) => el.visible !== false) as Column[],
  };

  return group;
};

export default useGroup;
